<template>
  <div class="login">
    <div class="logo">
      <div>
        <span style="font-weight: bold"
          >YouYuSC<span style="color: #d7291d">.</span>art</span
        >
        <span style="margin-left: 0.2885rem">又玄数艺</span>
        <div
          style="
            font-size: 0.1923rem;
            margin-top: 0.2404rem;
            letter-spacing: 0.125rem;
          "
        >
          打造<span style="font-weight: bold; font-size: 0.1923rem">中国</span
          >头部数字艺术平台
        </div>
      </div>
    </div>

    <div class="loginform">
      <div class="username">
        <input
          type="text"
          v-model="form.mobile"
          placeholder="账号"
          @input="CheckPhone(form.mobile)"
        />
      </div>
      <div class="password">
        <input type="password" v-model="form.password" placeholder="密码" />
      </div>
    </div>
    <all-btn :title="title" :loading="loading" @click="login" />

    <div class="btnbottom">
      <van-checkbox
      v-model="checked"
      checked-color="#18191a"
      icon-size=".2885rem"
    >
      <div>
        <span style="color: #767676">请勾选</span>
        <router-link style="font-weight: bold" to="agree">用户协议</router-link>
        <span style="color: #767676">和</span>
        <router-link style="font-weight: bold" to="agree">隐私政策</router-link>
      </div>
    </van-checkbox>
    <div class="tologin" @click="$router.push({name: 'catchlogin'})">
        验证码登录
    </div>
    </div>

    <div class="bottom">
      <router-link
        to="register"
        style="margin-right: 0.1923rem; font-weight: bold; color: black"
        >注册账号</router-link
      >
      <span>|</span>
      <router-link
        to="findpass"
        style="margin-left: 0.1923rem; font-weight: bold; color: black"
        >忘记密码</router-link
      >
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { Dialog, Toast } from "vant";
import { useRoute, useRouter } from "vue-router";
import commonStore from "../../store/common";
import checkPhone from "../../util/checkPhone";

// 获取路由标题
const route = useRoute();
const title = computed(() => route.meta.title);

// 手机号格式校验
let checkPhoneFlage = ref(false);
const CheckPhone = (mobile) => {
  if (checkPhone.checkPhone(mobile)) {
    checkPhoneFlage.value = true;
  } else {
    checkPhoneFlage.value = false;
  }
};

// 登录
const router = useRouter();
const common = commonStore();
const checked = ref(false);
let loading = ref(false);
const setting = computed(() => common.setting);
console.log("setting:", setting.value);
const form = ref({
  mobile: "",
  password: "",
  //requestId: "",
});
const login = () => {
  if (!checked.value) {
    return Toast.fail("请勾选用户协议和隐私政策");
  }
  if (!checkPhoneFlage.value) {
    return Dialog({
      title: "提示",
      message: "手机号格式不正确",
      confirmButtonColor: "#000000",
    });
  }
  loading.value = true;
  // if (setting.value.captcha) {
  //   captcha.show();
  // } else {
  common
    .login(form.value)
    .then(() => {
      common.getUserInfo().then(() => {
        loading.value = false;
        Toast.success("登录成功!");
        router.push({ name: "home" });
      }).catch(() => { 
        loading.value = false
      })
    })
    .catch(() => {
      loading.value = false;
    });
  //}
};

// 验证码
// let captcha = null;
// const captcha_init = () => {
//   if (setting.value.auth_code && !captcha) {
//     captcha = new window.TencentCaptcha(
//       setting.value.auth_code?.captcha_app_id,
//       (res) => {
//         if (res.ret != 0) {
//           loading.value = false;
//           return;
//         }
//         common
//           .captcha({ ticket: res.ticket, randstr: res.randstr })
//           .then((res) => {
//             console.log('reId:', res.requestId)
//             form.value.requestId = res.requestId;
//             common
//               .login(form.value)
//               .then(() => {
//                 loading.value = false;
//                 Toast.success("登录成功!");
//                 router.push({ name: "home" });
//               })
//               .catch(() => {
//                 loading.value = false;
//               });
//           })
//           .catch(() => {
//             loading.value = false;
//           });
//       }
//     );
//   }
// };

// onMounted(() => {
//   captcha_init();
// });
// watch(
//   () => setting.value.auth_code,
//   () => {
//     captcha_init();
//   }
// );
</script>

<style lang="scss" scoped>
.login {
  .logo {
    span {
      font-size: 0.3846rem;
    }
    color: black;
    padding: 0.3846rem;
    padding-top: 0.7692rem;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 0.4808rem;
  }

  .loginform {
    padding: 0.3846rem;
    padding-top: 0.5769rem;

    input {
      font-size: 0.2885rem;
      width: 100%;
      margin-bottom: 0.7692rem;
      padding-bottom: 0.1923rem;
      border: none;
      border-bottom: 0.0192rem solid #e8e8e8;
    }
  }

  .btnbottom { 
    display: flex;
    align-items: center;

    .tologin { 
      margin-left: 85px;
    }
  }

  .van-checkbox {
    margin-left: 0.3846rem;
    width: 200px;
  }

  .bottom {
    position: fixed;
    bottom: 0.3846rem;
    transform: translateX(-50%);
    left: 50%;
  }
}
</style>